import React,{useEffect,useState} from 'react'
import { Card,Table,Button,Drawer} from 'antd'


let dataSource;

let url = 'https://www.304cloud.top:4321/getuserlist';
fetch(url)
.then(res=>res.json())
.then(res=>{
    dataSource = res.data
})



const User = () => {
    const [visible, setVisible] = useState(false);
    const showDrawer = () => {
        setVisible(true);
    };
    const onClose = () => {
        setVisible(false);
    };
    const columns = [
        {
            title:'用户id',
            key:'user_id',
            width:250,
            align:'center',
            dataIndex:'user_id'
        },
        {
            title:'用户名',
            dataIndex:'user_name',
            align:'center',
            width:100,
        },
        {
            title:'用户简介',
            dataIndex:'user_self',
            align:'left',
            width:250,
        },
        {
            title:'用户头像',
            width:150,
            dataIndex:'user_head',
            align:'center',
            render:(txt,record) => record.user_head ? (<img src={record.user_head} alt={record.name} style={{width:"40px"}}/>
            ):(
                "暂无图片"
            )
        },
        {
            title:'详情',
            width:150,
            align:'center',
            render:(txt,record,index)=>{
                return(
                    <div>
                        <Button style={{margin:"0 0.3rem"}} type="primary" size="small" onClick={showDrawer}>
                            查看用户详情
                        </Button>
                    </div>
                )
            }
        },
    ]
    return (
        <div>
            <Card title="用户列表">
                <Table pagination={{defaultPageSize:5}} columns={columns} bordered dataSource={dataSource}/>
            </Card>
            <Drawer
                title="用户详情"
                placement="right"
                closable={false}
                onClose={onClose}
                visible={visible}
            >   
                
                
            </Drawer>
        </div>
    )
}

export default User
